<template>
  <div class="html-actions-container">
    <div class="action-section">
      <h3 class="section-title">网页操作</h3>

      <div class="action-grid">
        <!-- 解除限制类操作 -->
        <div class="action-card">
          <div class="action-header">
            <i class="icon-unlock"></i>
            <h4 class="action-title">解除限制</h4>
          </div>
          <div class="action-buttons">
            <button class="action-btn" @click="enableCopy">
              <i class="icon-copy"></i> 解除复制限制
            </button>
            <button class="action-btn" @click="enableRightClick">
              <i class="icon-mouse"></i> 解除右键限制
            </button>
            <button class="action-btn" @click="enableSelection">
              <i class="icon-select"></i> 解除选择限制
            </button>
          </div>
        </div>

        <!-- 页面控制类操作 -->
        <div class="action-card">
          <div class="action-header">
            <i class="icon-page"></i>
            <h4 class="action-title">页面控制</h4>
          </div>
          <div class="action-buttons">
            <button class="action-btn" @click="toggleDarkMode">
              <i class="icon-darkmode"></i> {{ darkMode ? '关闭' : '开启' }}暗黑模式
            </button>
            <button class="action-btn" @click="toggleFullscreen">
              <i class="icon-fullscreen"></i> {{ isFullscreen ? '退出' : '进入' }}全屏
            </button>
            <button class="action-btn" @click="removeFixedElements">
              <i class="icon-clean"></i> 移除悬浮元素
            </button>
          </div>
        </div>

        <!-- 开发者工具 -->
        <div class="action-card">
          <div class="action-header">
            <i class="icon-dev"></i>
            <h4 class="action-title">开发者工具</h4>
          </div>
          <div class="action-buttons">
            <button class="action-btn" @click="inspectElementMode">
              <i class="icon-inspect"></i> 元素检查模式
            </button>
            <button class="action-btn" @click="showHiddenElements">
              <i class="icon-eye"></i> 显示隐藏元素
            </button>
            <button class="action-btn" @click="toggleRulers">
              <i class="icon-ruler"></i> {{ rulersVisible ? '隐藏' : '显示' }}标尺
            </button>
          </div>
        </div>

        <!-- 自定义操作 -->
        <div class="action-card">
          <div class="action-header">
            <i class="icon-custom"></i>
            <h4 class="action-title">自定义操作</h4>
          </div>
          <div class="action-buttons">
            <button class="action-btn" @click="exportDom">
              <i class="icon-export"></i> 导出DOM结构
            </button>
            <button class="action-btn" @click="screenshotPage">
              <i class="icon-camera"></i> 页面截图
            </button>
            <button class="action-btn" @click="showXPath">
              <i class="icon-code"></i> 显示XPath
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 高级选项 -->
    <div class="advanced-section">
      <h3 class="section-title">高级选项</h3>
      <div class="advanced-options">
        <div class="option-item">
          <label class="option-label">
            <input type="checkbox" v-model="persistSettings"> 持久化设置
          </label>
        </div>
        <div class="option-item">
          <label class="option-label">
            <input type="checkbox" v-model="disableAnimations"> 禁用动画
          </label>
        </div>
        <div class="option-item">
          <label class="option-label">
            <input type="checkbox" v-model="forceMobileView"> 强制移动端视图
          </label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted, watch } from 'vue'

export default {
  emits: ['inspect-mode', 'toggle-rulers'],

  setup(props, { emit }) {
    // 状态管理
    const darkMode = ref(false)
    const isFullscreen = ref(false)
    const rulersVisible = ref(false)
    const persistSettings = ref(false)
    const disableAnimations = ref(false)
    const forceMobileView = ref(false)

    // 解除限制类操作
    const enableCopy = () => {
      // 1. 允许文本选择
      document.body.style.userSelect = 'auto'
      document.body.style.webkitUserSelect = 'auto'

      // 2. 移除右键菜单拦截
      document.oncontextmenu = null
      document.addEventListener('contextmenu', e => {
        e.stopPropagation()
      }, true)

      // 3. 解除复制/剪切拦截
      document.oncopy = null
      document.oncut = null
      document.addEventListener('copy', e => {
        e.stopImmediatePropagation()
      }, true)

      // 4. 解除快捷键禁用
      document.onkeydown = null
      document.addEventListener('keydown', e => {
        e.stopPropagation()
      }, true)

      // 5. 删除覆盖的透明层
      const overlays = document.querySelectorAll('div')
      overlays.forEach(div => {
        if (div.style.position === 'absolute' && div.style.zIndex === '999') {
          div.remove()
        }
      })

      showNotification('复制限制已解除', 'success')
    }

    const enableRightClick = () => {
      // 移除所有右键阻止事件
      const handlers = ['contextmenu', 'mousedown', 'mouseup']
      handlers.forEach(event => {
        document.removeEventListener(event, preventDefault)
        document.addEventListener(event, e => {
          if (e.button === 2) {
            e.stopPropagation()
          }
        }, true)
      })

      // 移除右键菜单阻止
      document.oncontextmenu = null
      document.addEventListener('contextmenu', e => {
        e.stopPropagation()
      }, true)

      showNotification('右键限制已解除', 'success')
    }

    const enableSelection = () => {
      // 允许文本选择
      document.body.style.userSelect = 'auto'
      document.body.style.webkitUserSelect = 'auto'

      // 移除选择阻止事件
      document.onselectstart = null
      document.addEventListener('selectstart', e => {
        e.stopPropagation()
      }, true)

      // 强制启用选择
      document.querySelectorAll('*').forEach(element => {
        element.style.userSelect = 'auto !important'
      })

      showNotification('选择限制已解除', 'success')
    }

    // 页面控制类操作
    const toggleDarkMode = () => {
      darkMode.value = !darkMode.value
      if (darkMode.value) {
        document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)'
        document.body.style.background = '#000'
      } else {
        document.documentElement.style.filter = ''
        document.body.style.background = ''
      }
    }

    const toggleFullscreen = () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
            .then(() => {
              isFullscreen.value = true
            })
            .catch(err => {
              console.error('全屏错误:', err)
            })
      } else {
        document.exitFullscreen()
        isFullscreen.value = false
      }
    }

    const removeFixedElements = () => {
      const fixedElements = document.querySelectorAll(
          'div[style*="position: fixed"], ' +
          'div[style*="position: sticky"], ' +
          'header[style*="position: fixed"], ' +
          'header[style*="position: sticky"]'
      )

      fixedElements.forEach(el => {
        if (el.clientHeight < 100 && el.clientWidth > window.innerWidth * 0.5) {
          el.remove()
        }
      })

      showNotification('已移除悬浮元素', 'success')
    }

    // 开发者工具
    const inspectElementMode = () => {
      emit('inspect-mode')
    }

    const showHiddenElements = () => {
      document.querySelectorAll('*').forEach(el => {
        const style = window.getComputedStyle(el)
        if (style.display === 'none' || style.visibility === 'hidden') {
          el.style.setProperty('display', 'block', 'important')
          el.style.setProperty('visibility', 'visible', 'important')
          el.style.setProperty('opacity', '1', 'important')
          el.style.setProperty('outline', '2px dashed red', 'important')
        }
      })
    }

    const toggleRulers = () => {
      rulersVisible.value = !rulersVisible.value
      emit('toggle-rulers', rulersVisible.value)
    }

    // 自定义操作
    const exportDom = () => {
      const html = document.documentElement.outerHTML
      const blob = new Blob([html], { type: 'text/html' })
      const url = URL.createObjectURL(blob)

      const a = document.createElement('a')
      a.href = url
      a.download = `dom-export-${new Date().toISOString().slice(0, 10)}.html`
      a.click()

      URL.revokeObjectURL(url)
    }

    const screenshotPage = () => {
      html2canvas(document.body).then(canvas => {
        const link = document.createElement('a')
        link.download = 'screenshot.png'
        link.href = canvas.toDataURL('image/png')
        link.click()
      })
    }

    const showXPath = () => {
      // 实现显示元素XPath的功能
      showNotification('XPath功能已激活', 'info')
    }

    // 辅助函数
    const showNotification = (message, type) => {
      const notification = document.createElement('div')
      notification.className = `action-notification ${type}`
      notification.textContent = message
      document.body.appendChild(notification)

      setTimeout(() => {
        notification.classList.add('show')
      }, 10)

      setTimeout(() => {
        notification.classList.remove('show')
        setTimeout(() => {
          notification.remove()
        }, 300)
      }, 3000)
    }

    const preventDefault = (e) => {
      e.preventDefault()
    }

    // 监听设置变化
    watch(disableAnimations, (val) => {
      if (val) {
        document.body.style.setProperty('animation', 'none', 'important')
        document.body.style.setProperty('transition', 'none', 'important')
      } else {
        document.body.style.animation = ''
        document.body.style.transition = ''
      }
    })

    watch(forceMobileView, (val) => {
      const viewport = document.querySelector('meta[name="viewport"]')
      if (val) {
        if (!viewport) {
          const meta = document.createElement('meta')
          meta.name = 'viewport'
          meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
          document.head.appendChild(meta)
        } else {
          viewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'
        }
      } else if (viewport) {
        viewport.content = ''
      }
    })

    return {
      darkMode,
      isFullscreen,
      rulersVisible,
      persistSettings,
      disableAnimations,
      forceMobileView,
      enableCopy,
      enableRightClick,
      enableSelection,
      toggleDarkMode,
      toggleFullscreen,
      removeFixedElements,
      inspectElementMode,
      showHiddenElements,
      toggleRulers,
      exportDom,
      screenshotPage,
      showXPath
    }
  }
}
</script>
<style scoped>
.html-actions-container {
  --primary-color: #00ff87;
  --secondary-color: #ff1f71;
  --accent-color: #60efff;
  --bg-dark: rgba(10, 20, 30, 0.95);
  --bg-light: rgba(255, 255, 255, 0.1);
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --border-color: rgba(255, 255, 255, 0.2);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  padding: 20px;
  background: var(--bg-dark);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  color: var(--text-primary);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  backdrop-filter: blur(10px);
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--secondary-color) 0%, #a020f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.action-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.action-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  box-shadow: 0 6px 12px rgba(0, 255, 135, 0.2);
}

.action-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-color);
}

.action-header i {
  font-size: 1.5rem;
  margin-right: 12px;
  color: var(--accent-color);
}

.action-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  width: 100%;
  padding: 10px 15px;
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  transition: var(--transition);
  text-align: left;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.action-btn i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.advanced-section {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.advanced-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.option-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: var(--transition);
}

.option-label:hover {
  color: var(--text-primary);
}

.option-label input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}

.option-label input[type="checkbox"]:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.option-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #111;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 图标样式 - 使用CSS变量控制颜色 */
.icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0.9);
}

.icon-unlock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2360efff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z' /%3E%3C/svg%3E");
}

.icon-copy {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3' /%3E%3C/svg%3E");
}

/* 响应式设计 */
@media (max-width: 768px) {
  .action-grid {
    grid-template-columns: 1fr;
  }

  .advanced-options {
    grid-template-columns: 1fr;
  }

  .action-btn {
    padding: 12px 15px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.action-card {
  animation: fadeIn 0.4s ease-out forwards;
}

.action-card:nth-child(1) { animation-delay: 0.1s; }
.action-card:nth-child(2) { animation-delay: 0.2s; }
.action-card:nth-child(3) { animation-delay: 0.3s; }
.action-card:nth-child(4) { animation-delay: 0.4s; }

/* 全局覆盖 - 用于暗黑模式等 */
:global(.dark-mode) {
  filter: invert(1) hue-rotate(180deg);
}

:global(.dark-mode) img,
:global(.dark-mode) video,
:global(.dark-mode) iframe {
  filter: invert(1) hue-rotate(180deg);
}
</style>
